<template>
  <div>
    <div class="btn">
      <el-button type="primary" @click="showfrom">添加</el-button>
    </div>
    <lists
      :tableData="tableData"
      @roleaddrefls="roleaddrefls"
      @updateRole="updateRole"
    ></lists>
    <forms :obj="obj" @roleaddrefls="roleaddrefls" ref="curForm"></forms>
  </div>
</template>

<script>
import lists from "./list.vue";
import forms from "./form.vue";
import { roleList } from "../../request/api.js";
export default {
  components: {
    lists,
    forms,
  },
  data() {
    return {
      tableData: [],
      obj: {
        isshow: false,
      },
    };
  },
  methods: {
    updateRole(id) {
      this.obj.isshow = true;
    //   console.log(this.$ref);
      this.$refs.curForm.getInfo(id)
    },
    roleaddrefls() {
      this.obj.isshow = false;
      this.getRoleList();
    },
    showfrom() {
      this.obj.isshow = true;
    },
    getRoleList() {
      roleList()
        .then((d) => {
          if (d.data.code == 200) {
            // console.log(d);
            this.tableData = d.data.list;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },

  mounted() {
    this.getRoleList();
  },
};
</script>

<style>
.btn{
   margin: 30px 0;
}
</style>